<template>
	<div>
		<p></p>
		<p class="c-title">请求参数说明</p>
		<table class="ui celled table">
		    <thead>
			    <tr>
			    <th style="width:20%">参数名</th>
			    <th style="width: 15%">类型</th>
			    <th style="width: 40%">说明</th>
			    <th style="width: 20%">必填</th>
			    <th style="width:30%">值</th>
		  		</tr>
		  	</thead>
		  	<tbody>
		  		<!-- 请求部分输入版 -->
			    <tr v-if="isEditable"
			    v-for="(r,i) in request">
			      	<td>
			      		<div class="ui transparent input">
			      			<input
			      			@keydown.enter.prevent="$emit('addRow', 'request', i)"
			      			@keydown.delete.prevent="deleteRow(r, 'request', i)"
			      			@keydown="autoSave"
			      			v-model="r.name">
			      		</div>
			       	</td>
			      	<td>
			      		<select v-model="r.type">
				      	    <option value="string">string</option>
				      	    <option value="int">int</option>
				      	    <option value="float">float</option>
				      	    <option value="double">double</option>
				      	    <option value="array">array</option>
				      	    <option value="object">object</option>
			      	    </select>
			        </td>
			        <td>
			      		<div class="ui transparent input">
			      			<input
			      			@keydown.enter.prevent="$emit('addRow', 'request', i)"
			      			@keydown="autoSave"
			      			v-model="r.des">
			      		</div>
			        </td>
			        <td>
			        	<input type="checkbox" :checked="r.must" tabindex="0" class="hidden" @change="autoSave">
			        </td>
			        <td>
			        	<div class="ui transparent input">
			        		<input v-model="r.val"
			        		@keydown.enter.prevent="$emit('addRow', 'request', i)"
			        		@keydown="autoSave">
			        	</div>
			        </td>
			    </tr>
			    <!-- 请求部分输出版 -->
			    <tr v-if="!isEditable"
			    v-for="r in request">
			    	<td>{{r.name}}</td>
			    	<td>{{r.type}}</td>
			    	<td>{{r.des}}</td>
			    	<td>{{r.must}}</td>
			    	<td>
			    		<div class="ui transparent input">
			    			<input v-model="r.val">
			    		</div>
			    	</td>
			    </tr>
		    </tbody>
		</table>
		<p class="c-title">返回参数说明</p>
		<table class="ui celled table">
		    <thead>
			    <tr>
			    <th style="width:30%">参数名</th>
			    <th style="width: 20%">类型</th>
			    <th style="width: 50%">说明</th>
		  		</tr>
		  	</thead>
		  	<tbody>
		  		<!-- 返回部分输入版 -->
			    <tr v-if="isEditable"
			    v-for="(r,i) in response">
			      	<td>
			      		<div class="ui transparent input">
			      			<input
			      			@keydown.enter.prevent="$emit('addRow', 'response', i)"
			      			@keydown.delete.prevent="deleteRow(r, 'response', i)"
			      			@keydown="autoSave"
			      			v-model="r.name">
			      		</div>
			       	</td>
			      	<td>
			      		<select v-model="r.type"
			      		@change="autoSave">
				      	    <option value="string">string</option>
				      	    <option value="int">int</option>
				      	    <option value="float">float</option>
				      	    <option value="double">double</option>
				      	    <option value="array">array</option>
				      	    <option value="object">object</option>
			      	    </select>
			        </td>
			        <td>
			      		<div class="ui transparent input">
			      			<input
			      			@keydown.enter.prevent="$emit('addRow', 'response', i)"
			      			@keydown="autoSave"
			      			v-model="r.des">
			      		</div>
			        </td>
			    </tr>
			    <!-- 返回部分输出版 -->
			    <tr v-if="!isEditable"
			    v-for="r in response">
			    	<td>{{r.name}}</td>
			    	<td>{{r.type}}</td>
			    	<td>{{r.des}}</td>
			    </tr>
		    </tbody>
		</table>
		<!-- 输出版的点击发送请求内容 -->
		<slot></slot>
	</div>
</template>
<script>
export default{
	name:'form',
	data(){
		return{
			timeout:''
		}
	},
	methods:{
		deleteRow(r, type, index){
			// 愚蠢的模拟回删事件…
			if(r.name.length > 0) r.name = r.name.slice(0, r.name.length - 1);
			else this.$emit('deleteRow', type, index);
		},
		autoSave(){
			clearTimeout(this.timeout);
			this.timeout = setTimeout(() => {
				this.$emit('save');
			},7000)
		}
	},
	props:['request','response','isEditable']
}
</script>
<style lang='less' scoped>
	th{
		font-weight: bold;
		font-size: 13px;
		padding: .72857143em .78571429em;
	}
	td{
		font-size: 13px;
		padding: .5em .78571429em;
		word-break: break-all;
		input{
			width: 100%;
		}
	}
</style>